<template>
  <el-dialog
    :title="title"
    :visible.sync="innerVisible"
    width="500px"
    @close="handleCancel"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="120px"
    >
      <!-- <el-form-item
          label="目录节点"
          prop="catalogName"
          v-if="!pkid"
        >
          <el-input
            disabled
            v-model="catalogName"
          />
      </el-form-item> -->
      <el-form-item label="服务名称" prop="serviceName">
        <el-input
          v-model="form.serviceName"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item label="服务类型" prop="serviceType">
        <el-select v-model="form.serviceType" clearable>
          <el-option
            v-for="item in serveTypeList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="服务地址" prop="serviceUrl">
        <el-input
          v-model="form.serviceUrl"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item label="数据地址" prop="dataUrl">
        <el-input
          v-model="form.dataUrl"
          placeholder="请输入"
        />
      </el-form-item>

      <!-- <el-form-item label="顺序" prop="orderIndex">
        <el-input-number
          disabled
          v-model="form.orderIndex"
          :min="0"
          placeholder="请输入顺序"
          :step="1"
        />
      </el-form-item> -->
    </el-form>

    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'mountDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '填写信息'
    },
    catalogName: {
      type: String
    },
    data: {
      type: Object
    },
    pkid: {
      type: String
    },
    modelValue: {
      type: Object,
      default: () => ({
        serviceName: '',
        serviceType: '',
        serviceUrl: '',
        dataUrl: ''
      })
    }
  },
  data() {
    return {
      form: {
        serviceName: '',
        serviceType: '',
        serviceUrl: '',
        dataUrl: ''
      },
      rules: {
        serviceName: [
          {
            required: true,
            message: '请输入服务名称',
            trigger: 'blur'
          }
        ],
        serviceType: [
          {
            required: true,
            message: '请选择数据类型',
            trigger: 'blur'
          }
        ],
        serviceUrl: [
          {
            required: true,
            message: '请输入服务地址',
            trigger: 'blur'
          }
        ],
        dataUrl: [
          {
            required: false,
            message: '请输入数据地址',
            trigger: 'blur'
          }
        ]
      },
      innerVisible: false,
      serveTypeList: [
        // { key: '21', value: 'WMTS' },
        // { key: '22', value: 'XYZ Tiles' },
        { key: '23', value: '矢量切片服务' },
        { key: '24', value: 'WMS' },
        // { key: '25', value: 'ArcGIS Server' },
        { key: '26', value: 'SuperMap REST' }
        // { key: '27', value: 'SuperMap RealSpace' }
      ]
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.form = { ...val }
        } else {
          this.form = {
            serviceName: '',
            serviceType: '',
            serviceUrl: '',
            dataUrl: ''
          }
        }
      }
    },
    visible(val) {
      this.innerVisible = val
    },
    innerVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false) // 父组件控制 visible
    },
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$emit('confirm', { ...this.form })
          this.handleCancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/dialog.scss';
::v-deep {
  .el-select {
    width: 320px;
  }

  .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
      height: 34px;
      background: transparent;
    }
  }
}
</style>
